<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/element.css">
    <script src="/js/axios.js"></script>
    <script src="/js/api.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        /* 设置位置 */
        .loading {
            position: absolute;
            background: #0099CC;

            /* 居中 */
            /* top: 50%;
            left: 50%; */
            width: 100%;
            height: 100%;
            /* 高度 */
            /* height: 300px;
            width: 30%; */
            /* 弹性布局 */
            display: flex;
            /* 设置子项在y轴方向居中，应该是设置起点在中间，非常有用，不然动画很怪 */
            align-items: center;
            justify-content: center;
        }

        /* 小竖条 */
        .item {
            height: 50px;
            width: 5px;
            background: white;
            /* 加margin，使竖条之间有空隙 */
            margin: 0px 3px;
            /* 圆角 */
            border-radius: 10px;
            /* 动画：名称、时间、循环 */
            animation: loading 1s infinite;
        }

        /* 设置动画 */
        @keyframes loading {
            0% {
                height: 0px;
            }

            50% {
                height: 50px;
            }

            100% {
                height: 0px;
            }
        }

        /* 为每一个竖条设置延时 */
        .item:nth-child(2) {
            animation-delay: 0.1s;
        }

        .item:nth-child(3) {
            animation-delay: 0.2s;
        }

        .item:nth-child(4) {
            animation-delay: 0.3s;
        }

        .item:nth-child(5) {
            animation-delay: 0.4s;
        }

        .item:nth-child(6) {
            animation-delay: 0.5s;
        }

        .item:nth-child(7) {
            animation-delay: 0.6s;
        }

        .item:nth-child(8) {
            animation-delay: 0.7s;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .header-box {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            justify-content: space-between;
        }

        #app {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .login_box {
            position: relative;
            width: 100%;
            height: 100%;
            /* border: 1px solid red; */
        }

        .login_child_box {
            width: 30%;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="loading">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <script src="/js/vue.js"></script>
    <script src="/js/element.js"></script>
    <script src="/js/dialog.js"></script>
    <script src="/js/user.js"></script>
    <script src="/js/sc.js"></script>
    <script src="/js/history.js"></script>
    <script src="/js/hua.js"></script>
    <script src="/js/login.js"></script>
    <script src="/js/news.js"></script>
    <script>
        setTimeout(() => {
            let vue = new Vue({
                template: `
            <div id="app"><div v-if="is_login">
            <div class="header-box" style="height:30px;">
                <div>后台管理</div>
                <div style="margin-right: 10px;">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{user.user_diqu}} {{user.user_nickname}}
                            <el-avatar icon="el-icon-user-solid"></el-avatar>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="exit">退出</el-dropdown-item>
                            <el-dropdown-item command="setting">设置</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <el-row>
                <el-col :span="4">
                    <el-menu default-active="user" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                        @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu index="1">
                            <template slot="title">选项4</template>
                            <el-menu-item index="user">用户</el-menu-item>
                            <el-menu-item index="hua">动画</el-menu-item>
                            <el-menu-item index="history">历史记录</el-menu-item>
                            <el-menu-item index="sc">收藏</el-menu-item>
                            <el-menu-item index="news">消息</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
                <el-col :span="20">
                    <component :is="component"></component>
                </el-col>
            </el-row>
        </div>
        <div v-else class="login_box">
            <login @get="getlogin"></login>
        </div></div>`,
                data: function () {
                    return {
                        msg: '123',
                        component: 'user',
                        is_login: false,
                        user: ''
                    }
                },
                components: {
                    sc: sc,
                    user: user,
                    history: history,
                    hua: hua,
                    login: login,
                    news: news
                },
                methods: {
                    handleOpen(key, keyPath) {
                        console.log(key, keyPath);
                    },
                    handleClose(key, keyPath) {
                        console.log(key, keyPath);
                    },
                    handleSelect(key, keyPath) {
                        console.log(key, keyPath);
                        this.component = key
                    },
                    getlogin(userInfo) {
                        sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
                        this.user = userInfo
                        this.is_login = true

                    },
                    handleCommand(val) {
                        if (val === 'exit') {
                            sessionStorage.removeItem('userInfo')
                            sessionStorage.removeItem('token')
                            this.is_login = false
                        }
                    }
                }
            })
            vue.$mount('#app')
        }, 3000)
    </script>
</body>

</html>